<html class="no-js">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>
        Koparion – Book Shop Bootstrap 4 Template
    </title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/static/myhome/img/favicon.png"/>
    <!-- all css here -->
    <!-- bootstrap v3.3.6 css -->
    <link rel="stylesheet" href="/static/myhome/css/bootstrap.min.css"/>
    <!-- animate css -->
    <link rel="stylesheet" href="/static/myhome/css/animate.css"/>
    <!-- meanmenu css -->
    <link rel="stylesheet" href="/static/myhome/css/meanmenu.min.css"/>
    <!-- owl.carousel css -->
    <link rel="stylesheet" href="/static/myhome/css/owl.carousel.css"/>
    <!-- font-awesome css -->
    <link rel="stylesheet" href="/static/myhome/css/font-awesome.min.css"/>
    <!-- flexslider.css-->
    <link rel="stylesheet" href="/static/myhome/css/flexslider.css"/>
    <!-- chosen.min.css-->
    <link rel="stylesheet" href="/static/myhome/css/chosen.min.css"/>
    <!-- style css -->
    <link rel="stylesheet" href="/static/myhome/css/style.css"/>
    <!-- responsive css -->
    <link rel="stylesheet" href="/static/myhome/css/responsive.css"/>
    <!-- modernizr css -->
    <script src="/static/myhome/js/vendor/modernizr-2.8.3.min.js">
    </script>
</head>
<body>
<!-- header-area-start -->
<header>
    <!-- header-top-area-start -->
    <div class="header-top-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="account-area text-right">
                        <ul>
                            {% if request.session.VipUser.id %}
                                <li><a href=""> {{ request.session.VipUser.phone }} </a></li>
                                <li><a href="register.html"> 我的账户 </a></li>
                                <li><a href="{% url 'myhome_logout' %}"> 退出 </a></li>
                            {% else %}
                                <li><a href="{% url 'myhome_login' %}"> 登录 </a></li>
                                <li><a href="{% url 'myhome_register' %}"> 注册 </a></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- header-top-area-end -->
    <!-- header-mid-area-start -->
    <div class="header-mid-area ptb-40">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12">
                    <div class="header-search">
                        <form action="#">
                            <input type="text" placeholder="Search entire store here..."/>
                            <a href="#"> <i class="fa fa-search"> </i> </a>
                        </form>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-4 col-xs-12">
                    <div class="logo-area text-center logo-xs-mrg">
                        <a href="index.html"> <img src="/static/myhome/img/logo/logo.png" alt="logo"/> </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                    <div class="my-cart">
                        <ul>
                            <li><a href="{% url 'myhome_cart_index' %}"> <i class="fa fa-shopping-cart"> </i> 我的购物车 </a> <span> 2 </span>
                                <div class="mini-cart-sub">
                                    <div class="cart-product">
                                        <div class="single-cart">
                                            <div class="cart-img">
                                                <a href="#"> <img src="/static/myhome/img/product/1.jpg" alt="book"/>
                                                </a>
                                            </div>
                                            <div class="cart-info">
                                                <h5><a href="#"> Joust Duffle Bag </a></h5>
                                                <p> 1 x &pound;60.00 </p>
                                            </div>
                                            <div class="cart-icon">
                                                <a href="#"> <i class="fa fa-remove"> </i> </a>
                                            </div>
                                        </div>
                                        <div class="single-cart">
                                            <div class="cart-img">
                                                <a href="#"> <img src="/static/myhome/img/product/3.jpg" alt="book"/>
                                                </a>
                                            </div>
                                            <div class="cart-info">
                                                <h5><a href="#"> Chaz Kangeroo Hoodie </a></h5>
                                                <p> 1 x &pound;52.00 </p>
                                            </div>
                                            <div class="cart-icon">
                                                <a href="#"> <i class="fa fa-remove"> </i> </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cart-totals">
                                        <h5> Total <span> &pound;12.00 </span></h5>
                                    </div>
                                    <div class="cart-bottom">
                                        <a class="view-cart" href="cart.html"> view cart </a>
                                        <a href="checkout.html"> Check out </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- header-mid-area-end -->
    <!-- main-menu-area-start -->
    <div class="main-menu-area hidden-sm hidden-xs sticky-header-1" id="header-sticky">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="menu-area">
                        <nav>
                            <ul>
                                <li class="active">
                                    <a href="/">
                                        首页
                                    </a>
                                </li>
                                <li>
                                    <a href="product-details.html">
                                        所有分类<i class="fa fa-angle-down"></i>
                                    </a>
                                    <div class="mega-menu">
                                        {% for v in booktypes %}
                                        <span>
                                            <a href="{% url 'myhome_list' v.id %}" class="title">{{ v.name }}</a>
                                            {% for vv in v.sub %}
                                            <a href="{% url 'myhome_list' vv.id %}">{{ vv.name }}</a>
                                            {% endfor %}
                                        </span>
                                        {% endfor %}
                                    </div>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    {% for v in booktypes %}
                    <div class="safe-area">
                        <a href="product-details.html">{{ v.name }}</a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <!-- main-menu-area-end -->
    <!-- mobile-menu-area-start -->
    <div class="mobile-menu-area hidden-md hidden-lg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="mobile-menu">
                        <nav id="mobile-menu-active">
                            <ul id="nav">
                                <li><a href="index.html"> Home </a>
                                    <ul>
                                        <li><a href="index-2.html"> Home-2 </a></li>
                                        <li><a href="index-3.html"> Home-3 </a></li>
                                        <li><a href="index-4.html"> Home-4 </a></li>
                                        <li><a href="index-5.html"> Home-5 </a></li>
                                        <li><a href="index-6.html"> Home-6 </a></li>
                                    </ul>
                                </li>
                                <li><a href="product-details.html"> Book </a>
                                    <ul>
                                        <li><a href="shop.html"> Tops &amp; Tees </a></li>
                                        <li><a href="shop.html"> Polo Short Sleeve </a></li>
                                        <li><a href="shop.html"> Graphic T-Shirts </a></li>
                                        <li><a href="shop.html"> Jackets &amp; Coats </a></li>
                                        <li><a href="shop.html"> Fashion Jackets </a></li>
                                        <li><a href="shop.html"> Crochet </a></li>
                                        <li><a href="shop.html"> Sleeveless </a></li>
                                        <li><a href="shop.html"> Stripes </a></li>
                                        <li><a href="shop.html"> Sweaters </a></li>
                                        <li><a href="shop.html"> hoodies </a></li>
                                        <li><a href="shop.html"> Heeled sandals </a></li>
                                        <li><a href="shop.html"> Polo Short Sleeve </a></li>
                                        <li><a href="shop.html"> Flat sandals </a></li>
                                        <li><a href="shop.html"> Short Sleeve </a></li>
                                        <li><a href="shop.html"> Long Sleeve </a></li>
                                        <li><a href="shop.html"> Polo Short Sleeve </a></li>
                                        <li><a href="shop.html"> Sleeveless </a></li>
                                        <li><a href="shop.html"> Graphic T-Shirts </a></li>
                                        <li><a href="shop.html"> Hoodies </a></li>
                                        <li><a href="shop.html"> Jackets </a></li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- mobile-menu-area-end -->
</header>
<!-- header-area-end -->
{% block con %}

{% endblock %}
<!-- footer-area-start -->
<footer>
    <!-- footer-top-start -->
    <div class="footer-top">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="footer-top-menu bb-2">
                        <nav>
                            <ul>
                                <li><a href="#"> home </a></li>
                                <li><a href="#"> Enable Cookies </a></li>
                                <li><a href="#"> Privacy and Cookie Policy </a></li>
                                <li><a href="#"> contact us </a></li>
                                <li><a href="#"> blog </a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer-top-start -->
    <!-- footer-mid-start -->
    <div class="footer-mid ptb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-12">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="single-footer br-2 xs-mb">
                                <div class="footer-title mb-20">
                                    <h3> Products </h3>
                                </div>
                                <div class="footer-mid-menu">
                                    <ul>
                                        <li><a href="about.html"> About us </a></li>
                                        <li><a href="#"> Prices drop </a></li>
                                        <li><a href="#"> New products </a></li>
                                        <li><a href="#"> Best sales </a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="single-footer br-2 xs-mb">
                                <div class="footer-title mb-20">
                                    <h3> Our company </h3>
                                </div>
                                <div class="footer-mid-menu">
                                    <ul>
                                        <li><a href="contact.html"> Contact us </a></li>
                                        <li><a href="#"> Sitemap </a></li>
                                        <li><a href="#"> Stores </a></li>
                                        <li><a href="register.html"> My account </a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="single-footer br-2 xs-mb">
                                <div class="footer-title mb-20">
                                    <h3> Your account </h3>
                                </div>
                                <div class="footer-mid-menu">
                                    <ul>
                                        <li><a href="contact.html"> Addresses </a></li>
                                        <li><a href="#"> Credit slips </a></li>
                                        <li><a href="#"> Orders </a></li>
                                        <li><a href="#"> Personal info </a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="single-footer mrg-sm">
                        <div class="footer-title mb-20">
                            <h3> STORE INFORMATION </h3>
                        </div>
                        <div class="footer-contact">
                            <p class="adress"><span> My Company </span> 42 avenue des Champs Elys&eacute;es 75000 Paris
                                France </p>
                            <p><span> Call us now: </span> (+1)866-540-3229 </p>
                            <p><span> Email: </span> support@hastech.com </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer-mid-end -->
    <!-- footer-bottom-start -->
    <div class="footer-bottom">
        <div class="container">
            <div class="row bt-2">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="copy-right-area">
                        <p> Copyright &copy; <a
                                href="javascript:if(confirm('http://www.bootstrapmb.com/  \n\n?????δ? Teleport Pro ȡ?أ??Ϊ ????&middot;????????ʼ?ַ????ķ?Χ??  \n\n?Ҫ?ӷ??????????'))window.location='http://www.bootstrapmb.com/'">
                            Koparion </a> . All Right Reserved. </p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="payment-img text-right">
                        <a href="#"> <img src="/static/myhome/img/1.png" alt="payment"/> </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer-bottom-end -->
</footer>
<!-- footer-area-end -->
<!-- Modal -->
<div class="modal fade" id="productModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true"> x </span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-5 col-sm-5 col-xs-12">
                        <div class="modal-tab">
                            <div class="product-details-large tab-content">
                                <div class="tab-pane active" id="image-1">
                                    <img src="/static/myhome/img/product/quickview-l4.jpg" alt=""/>
                                </div>
                                <div class="tab-pane" id="image-2">
                                    <img src="/static/myhome/img/product/quickview-l2.jpg" alt=""/>
                                </div>
                                <div class="tab-pane" id="image-3">
                                    <img src="/static/myhome/img/product/quickview-l3.jpg" alt=""/>
                                </div>
                                <div class="tab-pane" id="image-4">
                                    <img src="/static/myhome/img/product/quickview-l5.jpg" alt=""/>
                                </div>
                            </div>
                            <div class="product-details-small quickview-active owl-carousel">
                                <a class="active" href="#image-1"> <img
                                        src="/static/myhome/img/product/quickview-s4.jpg" alt=""/> </a>
                                <a href="#image-2"> <img src="/static/myhome/img/product/quickview-s2.jpg" alt=""/> </a>
                                <a href="#image-3"> <img src="/static/myhome/img/product/quickview-s3.jpg" alt=""/> </a>
                                <a href="#image-4"> <img src="/static/myhome/img/product/quickview-s5.jpg" alt=""/> </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-sm-7 col-xs-12">
                        <div class="modal-pro-content">
                            <h3> Chaz Kangeroo Hoodie3 </h3>
                            <div class="price">
                                <span> $70.00 </span>
                            </div>
                            <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet. </p>
                            <div class="quick-view-select">
                                <div class="select-option-part">
                                    <label> Size* </label>
                                    <select class="select">
                                        <option value=""> S</option>
                                        <option value=""> M</option>
                                        <option value=""> L</option>
                                    </select>
                                </div>
                                <div class="quickview-color-wrap">
                                    <label> Color* </label>
                                    <div class="quickview-color">
                                        <ul>
                                            <li class="blue"> b</li>
                                            <li class="red"> r</li>
                                            <li class="pink"> p</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <form action="#">
                                <input type="number" value="1"/>
                                <button> Add to cart</button>
                            </form>
                            <span> <i class="fa fa-check"> </i> In stock </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal end -->
<!-- all js here -->
<!-- jquery latest version -->
<script src="/static/myhome/js/vendor/jquery-1.12.0.min.js">
</script>

{% block jq %}

{% endblock %}

<!-- bootstrap js -->
<script src="/static/myhome/js/bootstrap.min.js">
</script>
<!-- owl.carousel js -->
<script src="/static/myhome/js/owl.carousel.min.js">
</script>
<!-- meanmenu js -->
<script src="/static/myhome/js/jquery.meanmenu.js">
</script>
<!-- wow js -->
<script src="/static/myhome/js/wow.min.js">
</script>
<!-- jquery.parallax-1.1.3.js -->
<script src="/static/myhome/js/jquery.parallax-1.1.3.js">
</script>
<!-- jquery.countdown.min.js -->
<script src="/static/myhome/js/jquery.countdown.min.js">
</script>
<!-- jquery.flexslider.js -->
<script src="/static/myhome/js/jquery.flexslider.js">
</script>
<!-- chosen.jquery.min.js -->
<script src="/static/myhome/js/chosen.jquery.min.js">
</script>
<!-- jquery.counterup.min.js -->
<script src="/static/myhome/js/jquery.counterup.min.js">
</script>
<!-- waypoints.min.js -->
<script src="/static/myhome/js/waypoints.min.js">
</script>
<!-- plugins js -->
<script src="/static/myhome/js/plugins.js">
</script>
<!-- main js -->
<script src="/static/myhome/js/main.js">
</script>
{% block js %}
{% endblock %}
</body>
</html>